<template>
  <div class="view">

    <div class="top">
      <div class="avatar-box">
        <img src="@/assets/img/infobar/avatar.jpg" alt="" class="avatar">
      </div>
      <div id="upName">
        like小丑的龟田志豪
        <div id="sign">知足常乐</div>
      </div>
      <div id="sendMessage">发消息</div>
    </div>

    <div id="add-btn">+ 关注 6</div>

    <div id="barrage-list">
      <div id="list">弹幕列表</div>
      <div id="open-btn">展开</div>
    </div>

    <div id="ad">
      <img src="@/assets/img/infobar/ad.jpg" alt="">
    </div>

    <div id="rela-recom">相关推荐</div>

    <item v-for="item in itemInfo" :item="item"></item>

  </div>
</template>

<script>
  import Item from "./Item.vue"

  export default {
    name: "Infobar",
    data() {
      return {
        itemInfo: [
          {url: new URL("@/assets/img/infobar/img1.webp", import.meta.url), title: "中文十级神对话", upName: "冷颜---", watch: 44.9, barrage: 412},
          {
            url:  new URL("@/assets/img/infobar/img2.webp", import.meta.url),
            title: "彻底暴露！“川建国”一词登上美国热搜！美国网友心态爆炸！中国网友冲进推特：保护我方建国同志！草！暴露了！",
            upName: "风声君",
            watch: 148.2,
            barrage: 7167
          },
          {
            url:  new URL("@/assets/img/infobar/img3.webp", import.meta.url),
            title: "我和同一个男人，接了100次婚..",
            upName: "都市奇妙物语",
            watch: 35.5,
            barrage: 759
          },
          {
            url:  new URL("@/assets/img/infobar/img4.webp", import.meta.url),
            title: "香港女童：人不爱自己的国家就没用了(48秒高能)",
            upName: "重庆共青团",
            watch: 24.4,
            barrage: 443
          },
          {
            url:  new URL("@/assets/img/infobar/img5.webp", import.meta.url),
            title: "CCTV6：被宠爱的共和国暴躁公主",
            upName: "正义路人胖虎",
            watch: 25.3,
            barrage: 1787
          },
          {
            url:  new URL("@/assets/img/infobar/img6.webp", import.meta.url),
            title: "忠言逆耳，这位学长好样的！",
            upName: "中二の小逸",
            watch: 164.1,
            barrage: 637
          },
          {
            url:  new URL("@/assets/img/infobar/img7.webp", import.meta.url),
            title: "神广告：假如孩子拥有选择出生的权力……",
            upName: "4A广告提案网",
            watch: 71.2,
            barrage: 3813
          },
          {
            url:  new URL("@/assets/img/infobar/img8.webp", import.meta.url),
            title: "假的日本黑社会PK正式的日本黑社会（偽ヤクザvs本物ヤクザ）",
            upName: "美浓轮泰史",
            watch: 7.7,
            barrage: 624
          },
        ]
      }
    },
    components: {
      Item
    }
  }
</script>

<style scoped>
  .view{
    width: 80%;
  }

  .avatar {
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }

  .top {
    display: flex;
  }

  #add-btn {
    background-color: deepskyblue;
    width: 30%;
    color: white;
    font: 16px "楷体";
    border-radius: 5%;
    margin-left: 15%;
    text-align: center;
    cursor: pointer;
  }

  .avatar-box {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    margin-right: 10px;
    cursor: pointer;
  }

  #upName {
    flex: auto;
    font: 14px "宋体";
    align-self: center;
  }

  #sendMessage {
    flex: auto;
    font: 14px "宋体";
    align-self: center;
    margin-right: 25%;
    cursor: pointer;
  }

  #barrage-list {
    background-color: #f8f8f8;
    height: 30px;
    font: 14px "宋体";
    position: relative;
    margin-top: 30px;
  }

  #list {
    position: absolute;
    top: calc(50% - 7px);
  }

  #sign {
    font-size: 12px;
    color: #666666;
  }

  #open-btn {
    position: absolute;
    top: calc(50% - 5px);
    right: 10px;
    font: 10px "宋体";
    color: gray;
  }

  #ad {
    /*width: 100px;*/
    margin-top: 10px;
    width: 100%;
    height: 100%;
  }

  #ad img {
    width: 100%;
    height: 100%;
  }

  #rela-recom {
    font: 14px "宋体";
    margin-top: 10px;
  }


</style>